<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Tesst</title>
<link rel="stylesheet"	href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script	src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
</head>
<body>

	<script>
		function onSuccess(data, status) {
			data = $.trim(data);
			$("#notification").text(data);
		}

		function onError(data, status) {
			// handle an error
			
			alert("er");
		}

		$(document).ready(function() {
			$("#submit").click(function() {

				var formData = $("#callAjaxForm").serialize();

				$.ajax({
					type : "POST",
					url : "ajax/loginAjax.jsp",
					cache : false,
					data : formData,
					success : onSuccess,
					error : onError
				});

				return false;
			});
		});
	</script>

<!-- call ajax page -->
    <div data-role="page" id="callAjaxPage">
        <div data-role="header">
            <h1>Login</h1>
        </div>
 
        <div data-role="content">
            <form id="login">
                <div data-role="fieldcontain">
                    <label for="firstName">First Name</label>
                    <input type="text" name="firstName" id="firstName" value=""  />
 
                    <label for="lastName">Last Name</label>
                    <input type="text" name="lastName" id="lastName" value=""  />
                    <h3 id="notification"></h3>
                    <button data-theme="b" id="submit" type="submit">Submit</button>
                </div>
            </form>
        </div>
 
        <div data-role="footer">
            
        </div>
    </div>
    test


</body>
</html>